<template>
	<view class="content" :style="swiperHinget">
		<view class="logo-content">
			<image src="../../../static/images/logo.png" mode=""></image>
			<text>专业高效的物业管理</text>
		</view>
		<view class="form">
			<view class="form-item">
				<text class="form-title">账号</text>
				<input class="input" type="number" v-model="ipone">
			</view>

			<view class="form-item">
				<text class="form-title">密码</text>
				<input class="input" type="password" v-model="Password" @confirm="toLogin">
			</view>
		</view>

		<view class="login-botton" @click="toLogin">
			登录
		</view>
	</view>
</template>

<script>
	import util from '../../../utils/util.js';
	import { loginModule } from '../../../modules/login.js';
	
	const login = new loginModule()
	
	export default {
		data() {
			return {
				ipone: '',
				Password: '',
			}
		},
		onLoad() {
			let Info = util.getSystemInfo() //获取设备信息
			this.swiperHinget = `height:${Info.windowHeight}px`;
		},
		methods:{
			toLogin() {
				let ipone = this.ipone;
				let Password = this.Password;
				if (!ipone || !Password) {
					util.tost('请填写完整')
					return
				}
				
				if(util.verifyPhone(ipone)) {
					login.goLogin(ipone,Password)
						.then((res)=>{
							console.log(res)
							util.setStorage('userData',res)
							util.tost('登录成功',true)
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/home/index/index'
								})
							},1000)
						})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 40%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		.logo-content{
			margin-bottom: 100upx;
			display: flex;
			align-items: center;
			flex-direction: column;
			image{
				width: 200upx;
				height: 200upx;
				margin-bottom: 30upx;
			}
			text{
				text-align: center;
				color: #999;
				font-size: 28upx;
			}
		}
		.form {
			width: 80%;
			margin-bottom: 100upx;
			
			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1upx solid rgba(#1b77f6, .5);
				padding-bottom: 15upx;
				margin-bottom: 40upx;
				
				.form-title{
					color: #666;
					margin-bottom: 15upx;
				}
			}



		}


		.login-botton {
			width: 70%;
			padding: 20upx;
			border-radius: 50upx;
			color: #fff;
			background-color: #1B77F6;
			box-shadow: 0 3upx 10upx rgba(#1b77f6, .5);
			text-align: center;
		}
	}
</style>
